<template>
    <div class="container clearfix">
        <div class="wrap">
            <div class="login-box">
                <div class="login-box-hd">
                    <div class="login-tab">
                        <ul class="clearfix">
                            <li><span ga-data="1002">扫码登录</span></li>
                            <li class="cur"><span ga-data="1003">账户登录</span></li>
                        </ul>
                    </div>
                </div>
                <div class="login-box-content">
                    <div class="login-box-tit">可直接使用百卓采购网/中国制造网账号登录</div>
                    <div class="login-box-form">
                        <a-form
                                id="components-form-demo-normal-login"
                                :form="form"
                                class="login-form"
                                @submit="handleSubmit"
                        >
                            <a-form-item>
                                <a-input v-decorator="formRules.username" placeholder="手机号码/用户名/邮箱">
                                    <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
                                </a-input>
                            </a-form-item>
                            <a-form-item>
                                <a-input-password v-decorator="formRules.password" placeholder="密码">
                                    <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
                                </a-input-password>
                            </a-form-item>


                            <a-button type="primary" html-type="submit" class="login-form-button">
                                登录
                            </a-button>

                            <a-form-item>
                                <a href="">
                                    忘记密码
                                </a>
                                <router-link to="/register" class="login-form-forgot">立即注册></router-link>

                            </a-form-item>
                        </a-form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        data() {
            return {
                formRules: {
                    username: ["username", {rules: [{required: true, message: "请填写登录名"}]}],
                    password: ["password", {
                        rules: [
                            {required: true, message: "请填写密码"},
                            {min: 6, max: 30, message: "密码长度在6-30个字符之间",}]
                    }],
                },
            }
        },
        beforeCreate() {
            this.form = this.$form.createForm(this, {name: 'normal_login'});
        },
        methods: {
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        console.log('Received values of form: ', values);
                    }
                });
            },
        },
    };
</script>
<style lang="stylus" scoped>
    .container >>> .el-input__inner
        width 280px
        height 40px
        border-radius 0px

    .container
        height 600px
        background url("../../../assets/login_images/login_bg.jpg") top center no-repeat

    .wrap
        width 1270px
        margin 0 auto

        .login-box
            float right
            width 370px
            margin-top 110px
            background #fff

            .login-box-hd
                height 64px
                border-bottom 1px solid #e5e5e5

                .login-tab
                    padding-top 10px

                    li
                        float left
                        width 50%
                        text-align center

                        span
                            width 100px
                            display inline-block
                            height 53px
                            line-height 53px
                            padding-bottom 1px
                            color #666;
                            font-size 16px
                            cursor pointer

            .login-box-content
                .login-box-tit
                    padding: 22px 45px 0;
                    line-height: 30px;
                    font-size: 14px;

                .login-box-form
                    padding 0 45px 0

                    .login-btn
                        text-align center

                        button
                            width 280px
                            height 40px
                            background-color #40be7f
                            text-align center
                            font-size 16px
                            color #ffffff
                            border-radius 0px

                    .tiparea
                        text-align right
                        font-size 12px
                        color #333

                        .repair
                            float left

                        .register-btn,
                        .register-btn:visited,
                        .register-btn:hover
                            color: #499fff

    #components-form-demo-normal-login .login-form {
        max-width: 300px;
    }

    #components-form-demo-normal-login .login-form-forgot {
        float: right;
    }

    #components-form-demo-normal-login .login-form-button {
        width: 100%;
    }

    .ant-btn-primary
    .ant-btn-primary:hover {
        width: 280px;
        height: 40px;
        line-height: 40px;
        background-color: #40be7f;
        color: #fff;
        font-size: 16px;
        text-align: center;
        border: none;
        cursor: pointer;
        border-radius: 2px;
    }

    .container >>> .ant-input {
        height 40px !important
    }

    .ant-form-item {
        margin-bottom 20px
    }

    .container >>> .ant-form-item-children {
        font-size 12px
    }
</style>